<template>
  <el-dialog title="Scene Dialog" :visible.sync="visible" width="30%" :before-close="handleClose">
    <div class="dialog-body">
      <div class="img-container"></div>
      <div class="info-container">
        <p>战例场景名称: {{ sceneName }}</p>
        <p>战例场景创建者: {{ sceneCreator }}</p>
        <div class="tags-container">
          <el-tag v-for="tag in tags" :key="tag" closable>
            {{ tag.name }}
          </el-tag>
        </div>
        <p>战例创建时间: {{ sceneCreateTime }}</p>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { type Topic, type DataItem } from '@/utils/ClassifyService'
const sceneName = ref('')
const sceneCreator = ref('')
const tags = ref([] as Topic[])
const sceneCreateTime = ref('')

const props = defineProps<{
  scene: DataItem
  visible: boolean
}>()

const emit = defineEmits(['close'])

const visible = ref(props.visible)

const updateDialog = () => {
  sceneName.value = props.scene.scene
  sceneCreator.value = props.scene.creator.name
  tags.value = props.scene.topic
  sceneCreateTime.value = props.scene.date
}

function handleClose() {
  emit('close')
}

onMounted(() => {
  updateDialog();
})
</script>

<style scoped></style>
